<template>
    <div>
        <h2>爷爷在此</h2>
        <h3>{{ msg }}</h3>
        <input type="text" name="" id="" v-model.trim="msg" />
        <hr>
        <MyBox :msg="msg" @change-msg="changeMSg" ref="myBoxRef" />
        <hr>
        <h2>{{ $route.params.name }}</h2>
        <h2>{{ route.params.name }}</h2>
    </div>
</template>

<script setup>
// 组件只需要导入，在 setup 语法糖里面，自动就会帮我们 return 给页面使用
import { ref, onMounted, provide } from 'vue';
import { useRoute } from 'vue-router';
import MyBox from '../components/MyBox.vue';
const msg = ref("前端老兵");

// ref 绑定再 DOM 对象上获取到 对应的 DOM 节点
// 但是，ref 绑定在组件上，那么因为 Vue3 没有 this 所以，就不再获取到 组件实例对象了
const myBoxRef = ref(null)

onMounted(() => {
    console.log(myBoxRef.value);
})


const changeMSg = () => {
    msg.value = "蜡笔小新";
}

// 我们可以使用 数据供应 provide 和数据消费  inject 来实现跨组件数据通信
// 我们数据供应一个 响应式数据对象 不要使用 value 属性，否则就是一个非响应式对象值
provide("msg", msg)

// 获取路由参数，this.$route.params.name Hooks
const route = useRoute()

</script>

<style lang="scss" scoped></style>